<template>
  <div>
    <el-page-header @back="goBack" content="全国风险地区汇总" style="color:#409eff;margin-bottom:4vh;">
    </el-page-header>
    <div class="r-body">
      <!-- 高风险地区 -->
      <el-row>
        <el-col :span="24">
          <div class="grid-content high-risk">
            <div class="title">
              <img src="@/assets/images/redwarning.png" alt="">
              <div class="text">高风险地区{{this.highNum}}个</div>
            </div>
            <!-- 高风险循环 -->
            <div class="h-body" v-for="(item1,index) in this.highRiskPros" :key="index">
              <div class="left">{{item1.provinceShortName}}</div>
              <div class="right">
                <div class="detail" v-for="(item2,index) in item1.dangerAreas" :key="index">
                  <div class="city">{{item2.cityName}}</div>
                  <div class="address">{{item2.areaName}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 中风险地区 -->
      <el-row>
        <div class="grid-content mid-risk">
          <div class="title">
            <img src="@/assets/images/orangewarning.png" alt="">
            <div class="text">中风险地区{{this.midNum}}个</div>
          </div>
          <div class="m-body" v-for="(item1,index) in this.midRiskPros" :key="index">
            <div class="left">{{item1.provinceShortName}}</div>
            <div class="right">
              <div class="detail" v-for="(item2,index) in item1.dangerAreas" :key="index">
                <div class="city">{{item2.cityName}}</div>
                <div class="address">{{item2.areaName}}</div>
              </div>
            </div>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
// 引入样式文件
import '@/assets/css/riskArea.css'
// 引入api
import { getRiskAreaAPI } from '@/api/index.js'
export default {
  name: 'RiskArea',
  data() {
    return {
      // 高风险地区个数
      highNum: '',
      // 中风险地区个数
      midNum: '',
      // 高风险省信息
      highRiskPros: {},
      // 中风险省信息
      midRiskPros: {}
    }
  },
  created() {
    this.getRiskArea()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    // 用axios取得中国风险地区信息
    async getRiskArea() {
      const { data: res } = await getRiskAreaAPI()
      this.highRiskPros = res.data[0].dangerPros
      this.midRiskPros = res.data[1].dangerPros
      this.highNum = res.data[0].dangerCount
      this.midNum = res.data[1].dangerCount
    }
  }
}
</script>
